<template>
  <div>

    <div style="margin-bottom: 20px">
      <el-input style="width: 240px" placeholder="请输入学生姓名" v-model="params.stuName"></el-input>
      <el-input style="width: 240px; margin-left: 5px" placeholder="请输入学生学号" v-model="params.stuNo"></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="load"><i class="el-icon-search"></i> 搜索</el-button>
      <el-button style="margin-left: 5px" type="warning" @click="reset"><i class="el-icon-refresh"></i> 重置</el-button>
      <el-button style="margin-left: 5px;" type="danger" @click="dialogFormVisible = true"><i class="el-icon-plus"></i> 添加学生</el-button>

    </div>

    <el-card>
      <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="stuName" label="姓名"></el-table-column>
        <el-table-column prop="stuNo" label="学号"></el-table-column>
        <el-table-column prop="stuSex" label="性别"></el-table-column>
        <el-table-column prop="stuTel" label="电话"></el-table-column>
        <el-table-column prop="stuGrade" label="年级"></el-table-column>
        <el-table-column prop="stuMajor" label="专业" width="180"></el-table-column>
        <el-table-column prop="stuClass" label="班级"></el-table-column>
        <el-table-column prop="stuScore" label="总学分" ></el-table-column>

        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <!--          scope.row 就是当前行数据-->
            <el-button style="margin-left: 5px;" type="primary" @click="showEditDialog(scope.row.id)">编辑</el-button>
            <el-popconfirm
                style="margin-left: 5px"
                title="您确定删除这行数据吗？"
                @confirm="del(scope.row.id)"
            >
              <el-button type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

<!--    添加学生-->
    <div>
      <el-dialog title="学生信息" :visible.sync="dialogFormVisible" width="35%">
        <el-form :model="addForm" ref="ruleForm" :rules="rules">
          <el-form-item label="学号" :label-width="formLabelWidth" prop="stuNo">
            <el-input v-model="addForm.stuNo" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="stuName">
            <el-input v-model="addForm.stuName" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" prop="stuSex">
            <el-radio v-model="addForm.stuSex" label="男" style="width: 100px">男</el-radio>
            <el-radio v-model="addForm.stuSex" label="女" style="width: 00px">女</el-radio>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth" prop="stuTel">
            <el-input v-model="addForm.stuTel" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="年级" :label-width="formLabelWidth" prop="stuGrade">
            <el-input v-model="addForm.stuGrade" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="专业" :label-width="formLabelWidth" prop="stuMajor">
            <el-input v-model="addForm.stuMajor" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="班级" :label-width="formLabelWidth" prop="stuClass">
            <el-input v-model="addForm.stuClass" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save" >确 定</el-button>
        </div>
      </el-dialog>
    </div>

<!--    编辑学生-->
    <div>
      <el-dialog title="学生信息" :visible.sync="editDialogVisible" width="35%" @close="editDialogClosed"
                 :close-on-click-modal='false'>
        <el-form :model="editForm" ref="editRuleForm" :rules="editRuleForm">
          <el-form-item label="学号" :label-width="formLabelWidth" prop="stuNo" >
            <el-input v-model="editForm.stuNo" autocomplete="off" style="width: 300px" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="stuName">
            <el-input v-model="editForm.stuName" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" prop="stuSex" >
            <el-radio v-model="editForm.stuSex" label="男" style="width: 100px">男</el-radio>
            <el-radio v-model="editForm.stuSex" label="女" style="width: 00px">女</el-radio>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth" prop="stuTel">
            <el-input v-model="editForm.stuTel" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="年级" :label-width="formLabelWidth" prop="stuGrade">
            <el-input v-model="editForm.stuGrade" autocomplete="off" style="width: 300px" disabled></el-input>
          </el-form-item>
          <el-form-item label="专业" :label-width="formLabelWidth" prop="stuMajor">
            <el-input v-model="editForm.stuMajor" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="班级" :label-width="formLabelWidth" prop="stuClass">
            <el-input v-model="editForm.stuClass" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="总学分" :label-width="formLabelWidth" prop="stuClass">
            <el-input v-model="editForm.stuScore" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="update" >确 定</el-button>
        </div>
      </el-dialog>
    </div>

<!--        分页-->
    <div style="margin-top: 20px">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import request from "@/util/request";

export default {
  name: "Student",
  data() {
    return {
      tableData: [],
      total:0,
      params: {
        pageNum: 1,
        pageSize: 10,
        stuNo: '',
        stuName: ''
      },
      dialogFormVisible: false,
      dialogTableVisible: false,
      editDialogVisible: false,
      formLabelWidth: '120px',
      addForm: {
        stuNo: '',
        stuName: '',
        stuSex: '男',
        stuTel: '',
        stuGrade: '',
        stuMajor: '',
        stuClass: ''
      },
      editForm: {
        stuNo: '',
        stuName: '',
        stuSex: '男',
        stuTel: '',
        stuGrade: '',
        stuMajor: '',
        stuClass: '',
        stuScore: ''
      },
      rules: {
        stuNo: [
          {required: true, message: '请输入学号', trigger: 'blur'},
        ],
        stuName:[
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        stuTel:[
          { required: true, message: '请输入电话', trigger: 'blur' }
        ],
        stuGrade:[
          { required: true, message: '请输入年级', trigger: 'blur' }
        ],
        stuMajor:[
          { required: true, message: '请输入专业', trigger: 'blur' }
        ],
        stuClass:[
          { required: true, message: '请输入班级', trigger: 'blur' }
        ],
      },
      editRuleForm:{
        stuName:[
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        stuTel:[
          { required: true, message: '请输入电话', trigger: 'blur' }
        ],
        stuMajor:[
          { required: true, message: '请输入专业', trigger: 'blur' }
        ],
        stuClass:[
          { required: true, message: '请输入班级', trigger: 'blur' }
        ],
        stuScore:[
          { required: true, message: '请输入总学分', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get('/student/page', {
        params: this.params
      }).then(res => {
        if (res.code === '200') {
          console.log(res.data)
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        name: '',
        phone: ''
      }
      this.load()
    },
    handleCurrentChange(pageNum) {
      // 点击分页按钮触发分页
      this.params.pageNum = pageNum
      this.load()
    },
    del(id) {
      request.delete("/student/delete/" + id).then(res => {
        if (res.code === '200') {
          this.$notify.success('删除成功')
          this.load()
        } else {
          this.$notify.error(res.msg)
        }
      })
    },
    save() {
      this.$refs['ruleForm'].validate((valid) => {
        if(valid){
          request.post('/student/save',this.addForm).then(res=>{
            if (res.code ==='200'){
              this.dialogFormVisible = false
              this.$notify.success('新增成功')
              this.$refs['ruleForm'].resetFields()
              this.load()
            } else {
              this.$notify.error(res.msg)
            }
          })
        }
      })
    },
    update() {
      this.$refs['editRuleForm'].validate((valid) => {
        if(valid){
          request.put('/student/update',this.editForm).then(res=>{
            if (res.code ==='200'){
              this.editDialogVisible = false
              this.$notify.success('修改成功')
              this.$refs['editRuleForm'].resetFields()
              this.load()
            } else {
              this.$notify.error(res.msg)
            }
          })
        }
      })
    },
    showEditDialog(id) {
      request.get('/student/'+ id).then(res=>{
        if (res.code ==='200'){
          this.editForm = res.data;
          // console.log(res.data)
        } else {
          this.$notify.error(res.msg)
        }
      })
      this.editDialogVisible = true;
    },
    editDialogClosed() {
      this.$refs['editRuleForm'].resetFields()
    },
  }

}
</script>

<style scoped>

</style>